<template>
  <div>
    <van-search  
    v-model="value" 
    placeholder="请输入搜索关键词"
    shape="round"
    @input="inputFn"
     />
    <div class="search_wrap" v-if="resultArr.length===0">
      <p  class="hot_title">热门搜索</p>
      <div class="hot_name_wrap" >
        <span class="hot_item" 
        v-for="(obj,index) in hotArr" 
        :key="index"
        @click="fn(obj.searchWord)"
        >{{obj.searchWord}}</span>
      </div>
    </div>
    <div class="search_wrap" v-else>
      <p  class="hot_title">搜索结果</p>
      <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
>
      <van-cell>
        
          <!-- <van-cell v-for=" obj in resultArr"
          :key="obj.id" 
          :title="obj.name" 
          :label="obj.ar[0].name +' - '+ obj.name"
          center 
           >
           <template #right-icon>
             <van-icon name="play-circle-o" size="0.6rem"/>
           </template>
           </van-cell> -->
           <SongItemVue 
          v-for=" obj in resultArr" 
          :id="obj.id"
          :key="obj.id"
          :name="obj.name"
          :authName="obj.ar[0].name"
          ></SongItemVue>

          </van-cell>
    </van-list>
    </div>
    
  </div>
</template>

<script>
 import { hotSearchAPI } from "@/api";
 import {resultSearchAPI} from '@/api'
 import SongItemVue from '@/components/SongItem.vue';

 export default {
  components:{
    SongItemVue
  },
data(){
  return{
    value:"",
    hotArr:[],
    resultArr:[],
    loading:false,
    finished:false,
    page:1,
    timer:null,
  }
},

async created(){
  const res = await hotSearchAPI({limit:9});
  this.hotArr=res.data.data
  
},
methods:{
  async getSearch(){
    return await resultSearchAPI({
    keywords:this.value,
    limit:20,
    offset:(this.page-1)*20
  })
},
 async fn(val){   // 热门点击后
  this.page=1
  this.finished=false
    this.value=val
    const res =await this.getSearch()
    this.resultArr=res.data.result.songs
    this.loading=false
  },
  async inputFn(){
  this.page=1
    if (this.timer) clearTimeout( this.timer)
    this.timer=setTimeout(async () => {
          this.loading=false
          this.finished=false
          if (this.value.length===0) {   
            this.resultArr=[]
            return
          }
          const res =await this.getSearch()
          if (res.data.result.songs===undefined) { //搜索结果没有的时候显示的
            this.resultArr=[] 
            return
          }
          this.resultArr=res.data.result.songs
    }, 1000);
    

},
async onLoad(){
  this.page++
  const res = await this.getSearch()
  if (res.data.result.songs===undefined) { //搜索结果没有的时候显示的
      this.finished=true
    this.loading=false
      return
    }
  this.resultArr= [...this.resultArr,...res.data.result.songs]
  this.loading=false
 
}

},

}
</script>

<style scoped>
/* 搜索容器的样式 */
.search_wrap {
  padding: 0.266667rem;
}

/*热门搜索文字标题样式 */
.hot_title {
  font-size: 0.32rem;
  color: #666;
}

/* 热搜词_容器 */
.hot_name_wrap {
  margin: 0.266667rem 0;
}

/* 热搜词_样式 */
.hot_item {
  display: inline-block;
  height: 0.853333rem;
  margin-right: 0.213333rem;
  margin-bottom: 0.213333rem;
  padding: 0 0.373333rem;
  font-size: 0.373333rem;
  line-height: 0.853333rem;
  color: #333;
  border-color: #d3d4da;
  border-radius: 0.853333rem;
  border: 1px solid #d3d4da;
}
</style>